<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- vue实例对应的视图模板 -->
    <div id="app">
        <input type="text" v-model="message">
        <hr />
        <div>生日：{{birth1}}</div>
        <hr />
        <button :class="{active: store>0}" class="static">加入购物车</button>
        <hr />
        <button @click="random=Math.random()">点我呀</button>{{random}}<br/>
        <span v-if="random>0.75">大于0.75</span>
        <span v-else-if="random>0.5">大于0.5</span>
        <span v-else-if="random>0.25">大于0.25</span>
        <span v-else>大于等于0</span>
        <hr />
        <button @click="show=!show">点我呀</button><br/>
        <span v-if="show">你看到我了，{{show}}</span><br/>
        <span v-show="show">show你看到我了，{{show}}</span>
        <hr />
        <ul>
            <li v-for="(value,key,index) in user">{{index+1}}.{{key}}:{{value}}</li>
        </ul>
        <hr />
        <ul>
            <li v-for="(user,index) in users" :key="index" v-if="user.gender=='女'">{{index+1}}.{{user.name}}--{{user.age}}--{{user.gender}}</li>
        </ul>
        <hr />
        <input type="text" v-model="num" @click.ctrl="print">
        <!-- 通过v-on定义一个vue事件，值：js脚本或者方法名 -->
        <input type="button" value="你点我呀！" @click="num++">
        <input type="button" value="你再点我呀！" @contextmenu.prevent="decr">
        <h1><span v-html="name">余栋</span>玉树临风，风流倜傥；有{{num}}位妹子迷恋他</h1>
        <hr />
        <input type="checkbox" v-model="language" value="java">java
        <input type="checkbox" v-model="language" value="ios">ios
        <input type="checkbox" v-model="language" value="php">php
        你选择了：{{language.join(",")}}
    </div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
    /* 初始化一个vue实例 */
    const vue = new Vue({
        el: "#app", // 指定vue实例的作用范围
        data: { // 定义数据模型
            name: "余栋",
            num: 10,
            language: [],
            user: {name:'柳岩', gender:'女', age: 21},
            users:[
                {name:'柳岩', gender:'女', age: 21},
                {name:'峰哥', gender:'男', age: 18},
                {name:'范冰冰', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ],
            store: 10,
            show: true,
            random: 0,
            birthday:1529032123201, // 毫秒值
            message: ""
        },
        watch: {
            message(newVal, oldVal){
                console.log(newVal, oldVal);
            }
        },
        created(){
            this.num=1000
            this.name="刘德华";
        },
        computed: {
            birth1(){
                const date = new Date(this.birthday);
                return date.getFullYear()+"-"+date.getMonth()+"-"+date.getDay();
            }
        },
        methods: { // 定义方法
            decr(){
                //ev.preventDefault();
                this.num--;
            },
            print(){
                console.log("你按了回车")
            },
            birth(){
                const date = new Date(this.birthday);
                return date.getFullYear()+"-"+date.getMonth()+"-"+date.getDay();
            }
        }
    })
</script>
</html>